<template>
  <Spin :spinning="spinning">
    <PageWrapper dense contentFullHeight contentClass="flex flex-col" :class="prefixCls">
      <div class="flex items-center home-head border-base h-60 baseBg">
        <Overview :value="total" name="项目总数" />
        <Line />
        <div class="flex-1 flex flex-wrap ml-6">
          <template v-for="item in proCategoryctyList" :key="item.field">
            <RectCard :data="item" />
          </template>
        </div>
      </div>
      <div class="home-body flex-1 flex mt-4">
        <div class="data-view-left flex flex-col flex-1">
          <div
            class="data-card flex baseBg border-base h-25"
            :class="deptData.length ? 'mb-6' : 'mb-3'"
          >
            <template v-for="item in monthFeeList" :key="item.field">
              <RectCardHorizontal class="ml-10" :data="item" />
              <Line class="mr-10 mt-6" :config="{ height: 50 }" v-if="item.field !== 'totalFee'" />
            </template>
          </div>
          <div class="data-tabs h-10 mb-3" v-if="deptData.length">
            <Tabs :data="deptData" @change="handleChange" />
          </div>
          <div class="view-chats baseBg border-base flex-1 flex flex-col">
            <div class="flex project-info h-20 pt-8">
              <div class="project-name pl-6.5">{{ activeProjectName }}</div>
              <div class="status-box flex-1 flex items-center justify-around">
                <template v-for="item in projectStateNumVoList" :key="item.stateName">
                  <div class="status-item cursor-pointer" @click="handleChangeStatus(item.stateId)">
                    <div class="number">{{ item.stateNum || 0 }} </div>
                    <div class="name">{{ item.stateName || '-' }}</div>
                  </div>
                </template>
              </div>
            </div>
            <div class="flex-1">
              <LineEchart :xData="lineXData" :data="lineData" />
            </div>
          </div>
        </div>
        <div class="data-view-right h-[calc(100vh-384px)] ml-4 w-104.7 baseBg border-base">
          <div class="overview flex items-center">
            <div class="task-total flex flex-col justify-center item-center">
              <div class="num mb-1">{{ projectMsgNumVo.processingNum }}</div>
              <div class="title">待办任务</div>
            </div>
            <div class="progress-box ml-3 flex-1">
              <div class="desc flex justify-between mb-4">
                <span>待办事项进度</span>
                <span class="process-num">
                  {{ projectMsgNumVo.processedNum }}/ {{ projectMsgNumVo.totalNum || 0 }}
                </span>
              </div>
              <div class="process-bar">
                <div
                  class="process-active"
                  :style="{
                    width: processWidth,
                  }"
                ></div>
              </div>
            </div>
          </div>
          <div class="msg-box mt-4" v-if="projectMsgNumVo.msgNumDetailList">
            <template v-for="(item, _) in projectMsgNumVo.msgNumDetailList" :key="_">
              <div class="msg-item cursor-pointer space-y-6 flex" @click="handleManage(item)">
                <div class="circle"></div>
                <div class="flex-1">
                  <div class="title flex items-center justify-between">
                    <span>{{ item.msgTypeStr }}</span>
                    <div class="desc">{{ item.createTimeStr }}</div>
                  </div>
                  <div class="desc mt-1"> {{ item.remindContent }} </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </PageWrapper>
  </Spin>
</template>

<script lang="ts" setup name="ZkrqHome">
  import { ref, computed, onMounted } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import Overview from './components/Overview.vue';
  import Line from './components/Line.vue';
  import RectCard from './components/RectCard.vue';
  import RectCardHorizontal from './components/RectCardHorizontal.vue';
  import Tabs from './components/Tabs.vue';
  import LineEchart from './components/LineEchart.vue';
  import { projectProgressCategorycty, monthFee } from './components/mock';
  import { getHomePageInfoApi } from '/@/api/zkrq/projectManagement';
  import { Spin } from 'ant-design-vue';
  import { usePermissionStore } from '/@/store/modules/permission';
  import { useRouter } from 'vue-router';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { useFlowStoreWithout } from '/@/store/modules/flow';
  import { useDesign } from '/@/hooks/web/useDesign';
  const { prefixCls } = useDesign('zkrq-home');
  const router = useRouter();

  const total = ref(0);
  const spinning = ref(false);
  const proCategoryctyList = ref(projectProgressCategorycty);
  const monthFeeList = ref(monthFee);
  const deptData = ref<Indexable[]>([]);
  const projectStateNumVoList = ref<Indexable[]>([]);

  const lineData = ref([]);
  const lineXData = ref([]);
  const activeParam = ref<Indexable>({
    searchType: 2, // 日期时间
    showType: 1, // 图
  });

  const allRecord = ref<Indexable>({});
  const activeProjectName = computed(() => {
    const info = deptData.value.find((el) => el.value === activeParam.value.deptId);

    if (info) return info.name;
    return '';
  });
  const projectMsgNumVo = computed(() => {
    return allRecord.value.projectMsgNumVo || {};
  });

  const processWidth = computed(() => {
    if (projectMsgNumVo.value.totalNum)
      return (
        parseFloat(projectMsgNumVo.value.processedNum / projectMsgNumVo.value.totalNum) * 100 + '%'
      );
    return 0;
  });
  async function init() {
    try {
      spinning.value = true;
      const ret = await getHomePageInfoApi(activeParam.value);
      allRecord.value = ret;
      console.log(
        '%cret===>94： ',
        'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
        ret,
      );
      total.value = ret.projectNum;
      if (ret.projectHomePageNumVO.projectHomePageDeptVo) {
        activeParam.value.deptId = ret.projectHomePageNumVO.projectHomePageDeptVo.deptId;
      }
      if (ret.projectHomePageNumVO.projectStateNumVoList) {
        projectStateNumVoList.value = ret.projectHomePageNumVO.projectStateNumVoList;
      }
      if (ret.projectHomePageNumVO.projectHomePageAvgShowVOList) {
        lineData.value = ret.projectHomePageNumVO.projectHomePageAvgShowVOList.map(
          (el) => el.value,
        );
        lineXData.value = ret.projectHomePageNumVO.projectHomePageAvgShowVOList.map(
          (el) => el.name,
        );
      }

      proCategoryctyList.value.forEach((el) => {
        el.value = ret[el.field] || 0;
      });
      monthFeeList.value.forEach((el) => {
        el.value = ret[el.field] || 0;
      });
      deptData.value = ret.deptList.map((e) => ({ value: e.deptId, name: e.deptName }));
    } catch (error) {
      console.log(
        '%cerror===>166： ',
        'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
        error,
      );

      throw error;
    } finally {
      spinning.value = false;
    }
  }

  function handleChange(v) {
    activeParam.value.deptId = v;
    init();
  }

  function handleChangeStatus(v) {
    activeParam.value.stateId = v;
    init();
  }

  function handleManage(record: Recordable) {
    const permissionStore = usePermissionStore();
    const flowStore = useFlowStoreWithout();

    const moduleIdMain = permissionStore.getFirstMenuParams?.moduleId;

    const { topModuleId, leftModuleId, extData = '{}' } = record;
    if (!leftModuleId) return;
    const { push } = router;

    try {
      flowStore.setFlowParams(JSON.parse(extData));

      function pushHandle() {
        push({
          path: `/module/${leftModuleId}`,
        });
      }

      if (topModuleId == moduleIdMain) {
        pushHandle();
      } else {
        const { refreshMenu } = usePermission();

        const params = {
          moduleId: topModuleId,
          redirect: `/module/${leftModuleId}`,
        };
        permissionStore.setFirstMenuParams(params);
        refreshMenu();
      }
    } catch (err) {
      throw err;
    }
  }

  onMounted(() => {
    init();
  });
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-zkrq-home';
  @gb-color: @table-bg;

  .@{prefix-cls} {
    padding: 16px;
    padding-top: 0px;

    .baseBg {
      background-color: @gb-color;
    }

    .border-base {
      border-radius: @border-radius-base;
    }

    .number {
      color: @text-color-bold;
      font-weight: 600;
      font-size: 20px;
      line-height: 20px;
    }

    .project-name {
      color: @text-color-bold;
      font-weight: 600;
      font-size: 20px;
      line-height: 20px;
    }

    .name {
      color: @text-color-defined;
      font-size: 14px;
    }

    .overview {
      margin: 16px;
      margin-bottom: 0px;
      padding: 12px;

      background-color: rgba(226, 231, 255, 0.2);
      border-radius: 8px;

      .task-total {
        padding: 12px;
        width: 105px;
        height: 97px;
        background: linear-gradient(180deg, #1163f7 0%, #96cbfd 97%);
        border-radius: 8px;
        color: #fff;
        text-align: center;

        .num {
          font-size: 32px;
          font-weight: 600;
          color: #ffffff;
          line-height: 32px;
        }
      }

      .progress-box {
        .process-num {
          font-size: 16px;
          font-weight: 500;
        }

        .process-bar {
          height: 12px;
          background: rgba(17, 83, 216, 0.1);
          border-radius: 60px;
          overflow: hidden;

          .process-active {
            width: 0;
            height: 100%;
            border-radius: 60px;
            background: linear-gradient(270deg, #99cbff 0%, #1163f7 100%);
            transition: width 0.3s;
          }
        }
      }
    }

    .msg-box {
      padding: 0 16px;
      height: calc(100% - 153px);
      overflow-y: auto;
    }

    .msg-item {
      padding-bottom: 16px;
      border-bottom: 1px solid #e9e9e9;

      .circle {
        margin-top: 32px;
        margin-right: 8px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #1153d8;
      }

      .title {
        color: @text-color-bold;
        font-weight: 600;
        font-size: 16px;
      }

      .desc {
        font-size: 14px;
        font-weight: 400;
        color: @text-color-defined;
      }
    }
  }
</style>
